<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl">
        <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.min.css" type="text/css" />
        <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.min.js"></script>

        <script>
            //抽取新增或编辑方法
            function inputClick() {
                //给新增和编辑按钮绑定点击事件,效果弹出模态框
                $(".inputBtn").click(function () {
                    //1:先清空模态框的数据,再来做操作
                    $("#inputModal input").val("");
                    $("#inputModal select").val(0);
                    //2:获取当前按钮中的自定义JSON对象
                    var obj = $(this).data("json");
                    //3:只有编辑按钮才做数据回显
                    if (obj) {
                        //把对象中的信息填入模态框
                        $("#inputModal input[name='id']").val(obj.id);
                        $("#inputModal input[name='name']").val(obj.name);
                        $("#inputModal input[name='parent.id']").val(obj.parentId);
                        $("#inputModal input[name='parentName']").val(obj.parentName);
                        $("#inputModal select[name='state']").val(obj.state);
                    }else {
                        //添加的时候需要把选中的节点放到表单(上级地区)中
                        var arr = $('#treeview').treeview('getSelected');
                        if(arr.length>0){
                            $("#inputModal input[name='parent.id']").val(arr[0].id);
                            $("#inputModal input[name='parentName']").val(arr[0].text);
                        }

                    }
                    //4:选择模态框对象,显示出来
                    $("#inputModal").modal("show");
                });
            }
        $(function () {
            //默认调用一次
            inputClick();
            //默认查询所有的根地区
            $.get('/region/listByParentId.do',{type:"tree"},function (data) {
                $('#treeview').treeview({
                    data:[{text:'全部地区',nodes:data}] ,
                    showTags:true,
                    //node是当前点击的节点
                    lazyLoad:function (node) {
                        $.get('/region/listByParentId.do',{parentId:node.id,type:"tree"},function (list) {
                            //把数据设值到treeview中
                            $('#treeview').treeview('addNode',[list,node]);
                        });
                    },
                    //选择节点事件
                    onNodeSelected:function (event,data) {
                        //data为当前点击的节点信息
                        $.get('/region/listByParentId.do',{parentId:data.id},function (list) {
                            var temp = "";
                            $.each(list,function (index,ele) {
                                temp += "<tr><td>"+ (index + 1) +"</td><td>"+ ele.name +"</td>" +" <td><a data-json='"+ele.json+"'" +
                                        " class=\"btn btn-info btn-xs inputBtn\" href=\"javascript:\">\n" +
                                        " <span class=\"glyphicon glyphicon-pencil\"></span> 编辑\n" +
                                        " </a></td>"
                                        +"</tr>";
                            });
                            $("tbody").html(temp);

                            //再调用一次
                            inputClick();
                        });
                    }
                });
            });
            //使用jQueryForm修改模态框的提交方式-ajax方式,设置提交方式必须在设计提交表单之前
            $('#editForm').ajaxForm(function(data){
                //操作成功,刷新页面
                if(data.success){
                    location.reload();
                }else {
                    //操作失败,提交用户错误信息
                    $.messager.alert("温馨提示",data.msg);
                }
            })
            /*模态框表单提交*/
            $('.submitBtn').click(function(){
                $("#editForm").submit();
            });
        });
    </script>
</head>
<body>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl">
    <div class="row">
        <div class="col-sm-3">
            <#include "../common/menu.ftl">
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">地区管理</h1>
                </div>
            </div>
            <div>
                <button class="btn btn-success inputBtn">
                    <span class="glyphicon glyphicon-import"></span>添加地区
                </button>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div id="treeview"></div>
                </div>
                <div class="col-sm-8">
                    <table class="table table-striped table-hover" >
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<#--模态框必须是body的子元素-->
<div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <#--模态框标题-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">编辑/增加</h4>
            </div>
        <#--模态框正文-->
            <div class="modal-body">
            <#--填充编辑界面-->
                <form class="form-horizontal" action="/region/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id"/>
                    <div class="form-group" >
                        <label class="col-lg-4 control-label">名称：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="name" placeholder="请输入名称"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">上级地区：</label>
                        <div class="col-lg-6">
                            <input type="hidden" class="form-control" name="parent.id" />
                            <input type="text" class="form-control" name="parentName" readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">状态：</label>
                        <div class="col-lg-6">
                            <select name="state" class="form-control">
                                <option value="0">普通</option>
                                <option value="1">推荐</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        <#--模态框底部按钮-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary submitBtn">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>